<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>easypay-配置管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="../libs/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="../css/public.css" media="all" />
	<script type="text/javascript" src="../libs/layui/layui.js"></script>
	<script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>
</head>
<body class="childrenBody">
<table class="layui-table" id="pay_config_table"></table>
<div id="aliPayTemplate" style="margin-right:15px;" class="layui-hide">
	<form class="layui-form" action="xxx">
		<input type="text" name="id" class="layui-hide"/>
		<input type="text" name="payAppid" class="layui-hide"/>
		<input type="text" name="code" class="layui-hide"/>
		<div class="layui-form-item">
			<label class="layui-form-label">平台appId：</label>
			<div class="layui-input-block">
				<input type="text" name="alipayConfig-appId" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">状态：</label>
			<div class="layui-input-block">
				<input type="radio" name="status" value="0" title="关闭" checked>
				<input type="radio" name="status" value="1" title="开启">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">算法类型：</label>
			<div class="layui-input-block">
				<input type="radio" name="alipayConfig-signType" value="RSA2" title="RSA2" checked>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">网关类型：</label>
			<div class="layui-input-block">
				<input type="radio" name="alipayConfig-serverUrl" value="https://openapi-sandbox.dl.alipaydev.com/gateway.do" title="沙箱"checked>
				<!--<input type="radio" name="alipayConfig-serverUrl" value="线上" title="线上">-->
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">公钥类型：</label>
			<div class="layui-input-block">
				<input type="radio" name="alipayConfig-mode" value="1" title="公钥模式" checked>
				<!--<input type="radio" name="alipayConfig-mode" value='2' title="证书模式">-->
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">商户私钥：</label>
			<div class="layui-input-block">
				<textarea name="alipayConfig-privateKey" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">支付宝公钥：</label>
			<div class="layui-input-block">
				<textarea name="alipayConfig-alipayPublicKey" placeholder="请输入内容" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">备注：</label>
			<div class="layui-input-block">
				<input type="text" name="remark" id="data-remark" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<div class="layui-input-block">
				<button type="button" class="layui-btn" id="submit_btn">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
	</form>
</div>
<script>
	layui.use(['table','laytpl'], function () {
		var table = layui.table;
		table.render({
			elem: '#pay_config_table',
			url: 'http://localhost:8081/payApp/list', // 后端接口地址
			method: 'GET', // 请求方式
			parseData: function (res) { // 数据格式解析函数
				return {
					code: res.code,
					count: res.data.total,
					data: res.data.list
				};
			},
			page: true,
			limits: [10, 15, 20, 25],
			limit: 13,
			request: {
				pageName: 'pageNo', // 页码的参数名称，默认：page
				limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
			},
			cols: [[
				{field: 'id', title: '应用编号', rowspan: 2},
				{field: 'name', title: '应用昵称', rowspan: 2},
				{field: 'status', title: '是否开启', rowspan: 2},
				{field: 'notifyUrl', title: '支付回调地址', rowspan: 2},
				{field: 'notifyRefundUrl', title: '退款回调地址', rowspan: 2},
				{align: 'center', colspan: 3, title: '支付宝'},
				{align: 'center', colspan: 3, title: '微信'},
				{
					fixed: 'right', align: 'center', title: '操作', rowspan: 2, templet: function (d) {
						return '<button type="button" data-id="123" class="layui-btn layui-btn-xs layui-btn-normal">编辑</button>';
					}
				}
			], [
				{
					field: 'alipayPC', align: 'center', title: 'PC支付', templet: function (d) {
						if (d.configCodes && d.configCodes.includes("alipay_pc")) {
							return '<button id="alipay_pc" data-id="'+d.id+'" type="button" class="layui-btn layui-btn-xs" lay-on="page">查看</button>\n';
						} else {
							return '<button id="alipay_pc" type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-on="page">未设置</button>';
						}
					}
				},
				{
					field: 'alipayFaceToFace', align: 'center', title: 'APP支付', templet: function (d) {
						if (d.configCodes && d.configCodes.includes("alipay_app")) {
							return '<button id="alipay_app" type="button" data-id="'+d.id+'" class="layui-btn layui-btn-xs" lay-on="page">查看</button>'
						} else {
							return '<button id="alipay_app" type="button" data-id="'+d.id+'"  class="layui-btn layui-btn-xs layui-btn-danger" lay-on="page">未设置</button>';
						}
					}
				},
				{
					field: 'alipayMobile', align: 'center', title: 'WAP支付', templet: function (d) {
						if (d.configCodes && d.configCodes.includes("alipay_wap")) {
							return '<button id="alipay_wap" data-id="'+d.id+'" type="button" class="layui-btn layui-btn-xs" lay-on="page">查看</button>';
						} else {
							return '<button id="alipay_wap" data-id="'+d.id+'" type="button" class="layui-btn layui-btn-xs layui-btn-danger" lay-on="page">未设置</button>';
						}
					}
				},
				{
					field: 'wechatPC', align: 'center', title: 'PC支付', templet: function (d) {
						if (d.configCodes && d.configCodes.includes("wx_pc")) {
							return '<button type="button" class="layui-btn layui-btn-xs">查看</button>';
						} else {
							return '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger">未设置</button>';
						}
					}
				},
				{
					field: 'wechatFaceToFace', align: 'center', title: '面对面', templet: function (d) {
						if (d.configCodes && d.configCodes.includes("wx_qr")) {
							return '<button type="button" class="layui-btn layui-btn-xs">查看</button>';
						} else {
							return '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger">未设置</button>';
						}
					}
				},
				{
					field: 'wechatMobile', align: 'center', title: 'WAP支付', templet: function (d) {
						if (d.configCodes && d.configCodes.includes("wx_wap")) {
							return '<button type="button" class="layui-btn layui-btn-xs">查看</button>';
						} else {
							return '<button type="button" class="layui-btn layui-btn-xs layui-btn-danger">未设置</button>';
						}
					}
				}
			]]
		});

		var layer = layui.layer;
		var util = layui.util;
		var laytpl = layui.laytpl;
		var render='';
		// 批量事件
		util.on('lay-on', {
			page: function() {
				$('#aliPayTemplate').removeClass("layui-hide")
				//通过id向后端传递数据
				var appId = $(this).data('id');
				var code = this.id;

				//点开编辑就渲染code和payAppid
				$('input[name="code"]').val(code)
				$('input[name="payAppid"]').val(appId)

				let url = "/config/get?code=" + code + "&payAppid=" + appId;
				$.get(url, function (data) {
					if (data != null) {
						//数据渲染到html
						renderAliConfig(data);
					}
				});
					// 页面层
				layer.open({
					type: 1,
					area: ['620px', 'auto'],
					content: $('#aliPayTemplate'),
					fixed: true,
					end: function () {
						//对弹出层的内容进行初始化。
						renderDefaultAliConfig();
						$('#aliPayTemplate').addClass("layui-hide");
						//刷新当前页面
						location.reload();
					}
				});
			}
		})

		function renderAliConfig(data){
			$('input[name="id"]').val(data.data.id)
			$('input[name="payAppid"]').val(data.data.payAppid)
			$('input[name="code"]').val(data.data.code)
			$('input[name="remark"]').val(data.data.remark)
			$('input[name="status"][value="'+ data.data.status + '"]').prop('checked', true);
			$('input[name="alipayConfig-appId"]').val(data.data.config.appId)
			$('input[name="alipayConfig-signType"][value="'+ data.data.config.signType + '"]').prop('checked', true);
			$('input[name="alipayConfig-mode"][value="'+data.data.config.mode + '"]').prop('checked', true),
			$('input[name="alipayConfig-serverUrl"][value="' + data.data.config.serverUrl +'"]').prop('checked', true),
			$('textarea[name="alipayConfig-privateKey"]').val(data.data.config.privateKey),
			$('textarea[name="alipayConfig-alipayPublicKey"]').val(data.data.config.alipayPublicKey)
			layui.form.render();
		}

		function renderDefaultAliConfig(){
			var defaultFormData = {
				id:  '',
				payAppid:  '',
				code:  '',
				remark:  '',
				status:  0,
				config: {
					appId: '',
					signType: '',
					mode: '',
					serverUrl: '',
					privateKey: '',
					alipayPublicKey: ''
				}
			};

			$('input[name="id"]').val(defaultFormData.id)
			$('input[name="payAppid"]').val(defaultFormData.payAppid)
			$('input[name="code"]').val(defaultFormData.code)
			$('input[name="remark"]').val(defaultFormData.remark)
			$('input[name="status"]:first').prop('checked', true);
			$('input[name="alipayConfig-appId"]').val(defaultFormData.config.appId)
			$('input[name="alipayConfig-signType"]:first').prop('checked', true);
			$('input[name="alipayConfig-mode"]:first').prop('checked', true);
			$('input[name="alipayConfig-serverUrl"]:first').prop('checked', true);
			$('textarea[name="alipayConfig-privateKey"]').val(defaultFormData.config.privateKey),
			$('textarea[name="alipayConfig-alipayPublicKey"]').val(defaultFormData.config.alipayPublicKey)
			layui.form.render();
		}

		$('#submit_btn').on('click',function () {
			var formData = {
				id:  $('input[name="id"]').val(),
				payAppid:  $('input[name="payAppid"]').val(),
				code:  $('input[name="code"]').val(),
				remark:  $('input[name="remark"]').val(),
				status:  $('input[name="status"]:checked').val(),
                config: JSON.stringify({
					appId: $('input[name="alipayConfig-appId"]').val(),
					signType: $('input[name="alipayConfig-signType"]:checked').val(),
					mode: $('input[name="alipayConfig-mode"]:checked').val(),
					serverUrl: $('input[name="alipayConfig-serverUrl"]:checked').val(),
					privateKey: $('textarea[name="alipayConfig-privateKey"]').val(),
					alipayPublicKey: $('textarea[name="alipayConfig-alipayPublicKey"]').val()
				})
			};
			var url = "/config/update";
			var msg = "更新成功";
			if (formData["id"] == ''){
				url="/config/create"
				msg = "创建成功";
			}
			$.post({
				url: url,
				data: formData,
				success: function(data) {
					alert(msg);
				}
			});
		});
	})
</script>
</body>
</html>
